<template>
     <div class="content">
              <el-tabs v-model="add_cus_infor_activeName">
                    <el-tab-pane  name="first">
                        <span slot="label" >客户信息</span>
                        <el-form ref="formRef" :model="customer" label-width="80px" :rules="rules">
                            <el-form-item label="客户名称" prop="customerName">
                                <el-input  v-model="customer.customerName" ></el-input>
                            </el-form-item>
                            <el-row :gutter="40">
                                <el-col :span="12">
                                        <el-form-item label="客户类型" prop="cusType">
                                            <el-select  v-model="customer.cusType" value-key="customerTypeId">
                                                <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                                <el-option  v-for="item in customertype_options"  :key="item.customerTypeId"  :label="item.customerType" :value="item"></el-option>
                                            </el-select>
                                        </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="客户来源"  prop="cusSource">
                                            <el-select  v-model="customer.cusSource" value-key="customerSourceId" >
                                                <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                                <el-option  v-for="item in customerSourceList"  :key="item.customerSourceId"  :label="item.customerSource" :value="item"></el-option>
                                            </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row :gutter="40">
                                <el-col :span="12">
                                    <el-form-item label="所在省份" prop="pro">
                                            <el-select v-model="province" @change="choosePro" value-key="ProID">
                                                <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                                <el-option  v-for="p in addrs"  :key="p.ProID"  :label="p.name" :value="p"></el-option>
                                            </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="所在城市" prop="city">
                                            <el-select v-model="cities" value-key="CityID">
                                                <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                                <el-option  v-for="c in addrCities"  :key="c.CityID"  :label="c.name" :value="c"></el-option>
                                            </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-form-item label="电子邮箱" prop="emailAddress">
                                <el-input v-model="customer.emailAddress"></el-input>
                            </el-form-item>
                            <el-form-item label="工作地址" prop="workAddress">
                                <el-input v-model="customer.workAddress">
                                    <template slot="append"><i class="iconfont icon-dizhi"></i></template>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="客户标签" prop="customerLable">
                                <el-input v-model="customer.customerLable"></el-input>
                            </el-form-item>
                            <el-form-item label="所属公海" prop="sea">
                                    <el-select  v-model="customer.sea" value-key="seaId">
                                        <!--key是循环的标准，lable是渲染出的值，v-model拿到value中的值-->
                                        <el-option  v-for="item in sea_data"  :key="item.seaId"  :label="item.seaName" :value="item"></el-option>
                                    </el-select>
                            </el-form-item>

                            <el-form-item style="margin-top: 15px; text-align: center">
                                <el-button @click="add_cus_data">保存</el-button>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane  name="second" >
                        <span slot="label">联系人</span>
                        <el-button class="is-top" size="small" style="margin-bottom: 15px" @click="openLinkman"><i class="iconfont icon-jiahao" > 添加联系人</i></el-button>
                        <el-table border :data="contactList" ref="multipleTable"  tooltip-effect="dark" style="width: 100%">
                            <el-table-column prop="contactName" label="名称" header-align="center" align="center"  > </el-table-column>
                            <el-table-column prop="contactType.contactTypeName" label="类型" header-align="center" align="center"></el-table-column>
                            <el-table-column prop="position" label="职务" header-align="center" align="center"></el-table-column>
                            <el-table-column prop="contactTel" label="电话" header-align="center" align="center"></el-table-column>
                            <el-table-column prop="contactPhone" label="手机" header-align="center" align="center"></el-table-column>
                            <el-table-column prop="emailAddress" label="电子邮箱" header-align="center" align="center"></el-table-column>
                          <!--  <el-table-column  label="操作" header-align="center" align="center">
                                <template slot-scope="s">
                                    <el-button type="primary" size="small" icon="el-icon-edit" circle ></el-button>
                                    <el-button type="danger" size="small"  icon="el-icon-delete" circle ></el-button>
                                </template>
                            </el-table-column>-->
                        </el-table>
                    </el-tab-pane>
                </el-tabs>

                    <!--添加联系人信息-->
    <el-dialog v-dialogDrag :visible.sync="linkman_activeVisitable" width="50%" :modal="false" title="新增联系人" :close-on-click-modal="false" class="paddchang">
        <add_linkman_info></add_linkman_info>
    </el-dialog>


     </div>
</template>

<script>

    import add_linkman_info from "./add_linkman_info";
    import province  from "../../assets/province.json"
    import cities from "../../assets/cities.json"
    let today = new Date();
    export default {
        name: "add_customer_info",
        components: {add_linkman_info},
        props:[],
        data() {
            var validateEmail = (rule, value, callback) => {
                if (value !== '' ) {
                    var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                    if(!reg.test(value)){
                        callback(new Error('请输入有效的邮箱'));
                    }
                }
                callback();
            };
            return{
                add_cus_infor_activeName:"first"
                ,linkman_activeVisitable:false
                ,customerSourceList:''//客户来源
                ,customertype_options:''//客户类型
                ,sea_data:''//所有公海
                ,cities:{}
                ,province:{}
                ,customer:{
                    sea:{
                        seaId:1
                    },
                    cusSource:{
                        customerSourceId:1
                    },
                    cusType:{
                        customerTypeId:1
                    },
                    contractNum:0,
                    cusStage:{stageId:1},
                    isFocus:0
                }
                ,contactList:[]
                ,contact:{}
                , addrs:province,
                addrCities:[],
                rules:{
                    customerName: [
                        {required: true, message: '请输入客户名', trigger: 'change' }
                    ],
                    emailAddress:[ {validator: validateEmail, trigger: 'change'}],
                }



            }

        },
        methods:{
            //获取客户来源
            getCusSource(){
                this.axios.post("api/customer/all_cussource").then(v =>{
                    this.customerSourceList = v.data;
                }).catch()
            },
            // 获取客户类型
            get_cusType(){
                this.axios.get("api/customer/all-custype").then(v => {
                    this.customertype_options = v.data;
                }).catch(() => {
                    this.global.mes_error("客户类型数据获取失败！")
                })
            },
            //获取公海
            get_sea(){
                this.axios.get("api/customer/all_sea").then(v => {
                    this.sea_data = v.data;
                }).catch(() => {
                    this.global.mes_error("公海数据获取失败！")
                })
            },

            //axios添加客户信息
            add_cus_data(){
                if(this.contactList.length == 0){
                    this.global.mes_success("请添加至少一位联系人!")
                }else{
                this.customer.city=this.cities.name
                this.customer.pro=this.province.name
                this.customer.createDate = new Date(today.getTime())
                this.customer.contact = this.$store.state.vueContact.contactList
                this.customer.fallDate = this.fall_date
                this.customer.cusStage.stageId = 1
                this.customer.creater = this.$store.state.user
                this.customer.owner = this.$store.state.user
                if(this.isFocu){
                    this.customer.isFocus = 1
                }else {
                    this.customer.isFocus = 0
                }
                console.log("新增客户：");
                console.log(this.customer);
                this.$axios.post("api/customer/add_cus_data",this.customer)
                .then(() => {
                    //刷新数据
                    this.$store.state.vueCusMan.customerinfoVisible = false;
                    this.$store.state.vueCusMan.get_customers_data(1,this.$store.state.vueCusMan.page_size,'','',this.$store.state.vueCusMan.stageId )
                    //清空表单
                   this.clearCus();
                }).catch()
                }},
            //清空客户
            clearCus(){
                this.customer = {
                    customerId:0,
                    customerName:'',
                    remarks:'',
                    creatDate:'',
                    allocateTime:'',
                    fallDate:'',
                    emailAddress:'',
                    customerBehaviorScore:'',
                    workAddress:'',
                    nextVisitTime:'',
                    pro:'',
                    city:'',
                    customerLable:'',
                    cusType:{
                        customerTypeId:1
                    },
                    cusSource:{
                        customerSourceId:1
                    },
                    sea:{
                        seaId:1
                    },
                    cusStage:{stageId:1},
                }
                this.province = ''
                this.cities = ''
                this.$store.state.vueContact.contactList = []
            },

            //选择省时触发的change事件
            choosePro(pro){
                this.addrCities = cities.filter(function (city) {
                    return city.ProID == pro.ProID ;
                })
                this.cities = this.addrCities[0]
            },
            //添加联系人
            openLinkman(){
                this.linkman_activeVisitable = true
             /*   window.console.log(this)*/
                //添加联系人时，将本页面数据全部存入store中管理
                this.$store.dispatch("setVueContact",this)
                //添加联系人时，所属客户v-model标识改为0
                this.$store.state.index = 0
            }
        },
        computed:{
            //回落时间 当前时间一个月后
            fall_date(){
                let fallDate = new Date(today.getTime()+31 * 24 * 3600 * 1000);
                return fallDate;
                }
    },
        created(){
            this.getCusSource();
            this.get_cusType();
            this.get_sea();
        }
    }
</script>

<style scoped>
.el-form/deep/.el-form-item{
        margin-bottom: 20px;
    }
.content{
 background-color: #ffffff!important;
    margin: 0!important;
}
.el-checkbox__input.is-checked + .el-checkbox__label{
    color: #606226!important;
}
.el-select {
    width: 100%!important;
}
</style>